import React, { JSX } from 'react';
import { ReactComponent as WarningIcon } from '../../assets/alertWarning.svg';
import { ReactComponent as InfoIcon } from '../../assets/alertInformation.svg';
import { ReactComponent as SuccessIcon } from '../../assets/alertSuccess.svg';
import { Box, Snackbar, Typography } from '@mui/material';
import '@fontsource/inter';

interface AlertBoxProps {
  severity?: 'success' | 'info' | 'warning';
  open: boolean;
  onClose: () => void;
  title: string;
  message: string;
  autoHideDuration?: number
}

interface AlertBoxConfig {
  borderColor: string;
  contentColor: string;
  backgroundColor: string;
  icon: JSX.Element;
}

interface AlertBoxConfigSet {
  info: AlertBoxConfig;
  success: AlertBoxConfig;
  warning: AlertBoxConfig;
}

const alertBoxConfigs: AlertBoxConfigSet = {
  info: {
    borderColor: '#4C81EB',
    contentColor: '#154AB6',
    backgroundColor: '#E8EDFB',
    icon: <InfoIcon />
  },
  success: {
    borderColor: '#48A79A',
    contentColor: '#0D6A61',
    backgroundColor: '#ECFDF5',
    icon: <SuccessIcon />
  },
  warning: {
    borderColor: '#FFCA7B',
    contentColor: '#D97706',
    backgroundColor: '#FFFBEB',
    icon: <WarningIcon />
  }
};

function AlertBox(props: AlertBoxProps): JSX.Element {
  const { open, onClose, title, message, autoHideDuration = 4000, severity = 'info' } = props;

  const alertBoxConfig: AlertBoxConfig = alertBoxConfigs[severity];

  return (
    <Snackbar
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right'
      }}
      autoHideDuration={autoHideDuration}
      open={open}
      onClose={onClose}
      sx={{
        background: alertBoxConfig.backgroundColor,
        padding: '16px 32px 16px 24px',
        height: '52px',
        border: '1px solid ' + alertBoxConfig.borderColor,
        boxShadow: '0px 12px 24px rgba(38, 46, 53, 0.12)',
        borderRadius: '5px'
      }}
    >
      <Box sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        gap: '12px'
      }}>
        <Box sx={{
          width: '20px',
          height: '20px',
          flex: 'none',
          order: 0,
          flexGrow: 0,
        }}>
          {alertBoxConfig.icon}
        </Box>
        <Box sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          padding: '0px',
          gap: '12px',
          width: '458px',
          height: '46px',
          flex: 'none',
          order: 1,
          flexGrow: 1
        }}>
          <Typography style={{
            fontFamily: 'Inter',
            fontStyle: 'normal',
            fontWeight: 600,
            fontSize: '14px',
            lineHeight: '17px',
            color: alertBoxConfig.contentColor,
            flex: 'none',
            order: 0,
            alignSelf: 'stretch',
            flexGrow: 0
          }}>
            {title}
          </Typography>
          <Typography style={{
            fontFamily: 'Inter',
            fontStyle: 'normal',
            fontWeight: 400,
            fontSize: '14px',
            lineHeight: '17px',
            color: '#596A7C',
            flex: 'none',
            order: 0,
            alignSelf: 'stretch',
            flexGrow: 0
          }}>
            {message}
          </Typography>
        </Box>
      </Box>
    </Snackbar>
  );
}

export { AlertBox };